<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Clock</title>
  <style>
    canvas {
      position:absolute;
      width:100%;
      height:100%;
      left:0px;
    }
  </style>
</head>
<body>
  <canvas id="clock"></canvas>
  <script>
function getDayFrac() {
  var f = ((this.getHours() + ((this.getMinutes() + (this.getSeconds() / 60)) /60))/24);
  return(f);
}

function drawSun(angle) {
  var w = this.canvas.width;
  var h = this.canvas.height;
  var radius = Math.min(w, h)/24;
  var x = Math.sin(angle) * radius * 10;
  var y = Math.cos(angle) * radius * 10; 
  if ( y < 0) {
    this.fillStyle = "#000000";
  } else {
    this.fillStyle = "#ffffff";
  }
  this.beginPath();
  this.arc(w/2+x,h/2+y,radius,0,2*Math.PI);
  this.fill();
}

var c = document.getElementById("clock");
var ctx = c.getContext("2d");
ctx.drawSun = drawSun;

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
c.width = w;
c.height = h;
mainLoop();

function mainLoop() {
  ctx.fillStyle = "#ffffff";
  ctx.fillRect(0,0,w,h/2);
  ctx.fillStyle = "#000000";
  ctx.fillRect(0,h/2,w,h/2);

  now = new Date();
  now.getDayFrac = getDayFrac;

  ctx.drawSun(Math.PI * 2 * now.getDayFrac() );
  window.setTimeout(mainLoop, 1000); // refresh every 1000ms
}

  </script>
</body>
</html>
